Benutzer:Col. o'neill/arcs.css: Unterschied zwischen den Versionen
aus Stargate Wiki, dem deutschsprachigen Stargate-Lexikon
Weitere Optionen
KKeine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
/* TODO: | /* TODO: v4 Cross-Browser compat */ | ||
#arcs-wrapper { | #arcs-wrapper { | ||
display: block !important; | display: block !important; | ||
| Zeile 11: | Zeile 11: | ||
height: 130px; | height: 130px; | ||
margin-bottom: 50px; | margin-bottom: 50px; | ||
white-space: nowrap; | |||
overflow: auto; | |||
padding-bottom: 25px; | |||
box-sizing: content-box; | |||
} | } | ||
| Zeile 82: | Zeile 86: | ||
#arc-v2.arc { | #arc-v2.arc { | ||
height: 60px; | height: 60px; | ||
padding-top: 25px; | |||
padding-bottom: 15px; | |||
box-sizing: content-box; | |||
} | } | ||
| Zeile 89: | Zeile 96: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background-color: #627499; | background-color: #627499; | ||
} | |||
#arc-v2 .arc-events { | |||
padding-top: 25px; | |||
margin-top: -25px; | |||
padding-bottom: 15px; | |||
white-space: nowrap; | |||
overflow: auto; | |||
} | } | ||
| Zeile 247: | Zeile 262: | ||
top: -27px; | top: -27px; | ||
left: 9px; | left: 9px; | ||
} | |||
#arc-v4.arc { | |||
height: 60px; | |||
padding-top: 25px; | |||
padding-bottom: 15px; | |||
box-sizing: content-box; | |||
position: relative; | |||
} | |||
#arc-v4 table { | |||
border-collapse: collapse; | |||
width: 100%; | |||
table-layout: fixed; | |||
} | |||
#arc-v4 td { | |||
border-width: 0; | |||
padding: 0; | |||
} | |||
#arc-v4 td:first-child { | |||
width: max-content; | |||
} | |||
#arc-v4 .arc-line { | |||
width: 100%; | |||
padding: 2px; | |||
box-sizing: border-box; | |||
background-color: #749962; | |||
z-index: 200; | |||
position: relative; | |||
} | |||
#arc-v4 .arc-events { | |||
white-space: nowrap; | |||
overflow: auto; | |||
padding-top: 15px; | |||
margin-top: -15px; | |||
padding-bottom: 17px; | |||
padding-left: 40px; | |||
} | |||
#arc-v4 .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; | |||
font-size: 13px; | |||
} | |||
#arc-v4 .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-v4 .arc-event::after { | |||
content: ''; | |||
width: 12px; | |||
height: 12px; | |||
border-radius: 100%; | |||
background-color: #749962; | |||
position: absolute; | |||
top: -27px; | |||
left: 9px; | |||
} | |||
#arc-v4 .arc-caption { | |||
position: relative; | |||
top: -49px; | |||
font-size: 16px; | |||
color: #749962; | |||
font-weight: bold; | |||
} | |||
#arc-v4 .arc-events-arrow-left-wrapper { | |||
position: absolute; | |||
height: 70px; | |||
width: 50px; | |||
background-image: linear-gradient(to left, transparent 0%, white 50%); | |||
z-index: 100; | |||
top: 14px; | |||
} | |||
#arc-v4 .arc-events-arrow-left { | |||
width: 0; | |||
height: 0; | |||
border: 10px solid; | |||
border-color: transparent #bbb transparent transparent; | |||
position: absolute; | |||
top: 35px; | |||
transition: opacity .5s ease; | |||
} | |||
#arc-v4 .arc-events-arrow-right-wrapper { | |||
position: absolute; | |||
height: 70px; | |||
width: 50px; | |||
background-image: linear-gradient(to right, transparent 0%, white 50%); | |||
z-index: 100; | |||
right: 0; | |||
top: 14px; | |||
} | |||
#arc-v4 .arc-events-arrow-right { | |||
width: 0; | |||
height: 0; | |||
border: 10px solid; | |||
border-color: transparent transparent transparent #bbb; | |||
position: absolute; | |||
top: 35px; | |||
right: 0; | |||
transition: opacity .5s ease; | |||
} | } | ||