Benutzer:Col. o'neill/arcs.css
aus Stargate Wiki, dem deutschsprachigen Stargate-Lexikon
Hinweis: Leere nach dem Speichern 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: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Extras → Internetspuren löschen … → Individuelle Auswahl → Den kompletten Cache löschen
/* TODO: v4 Cross-Browser compat */ #arcs-wrapper { display: block !important; overflow: hidden; } #arcs-temp { display: none; } #arc-v1.arc { height: 130px; margin-bottom: 50px; white-space: nowrap; overflow: auto; padding-bottom: 25px; box-sizing: content-box; } #arc-v1 .arc-line { width: 100%; padding: 2px; box-sizing: border-box; background-color: #627499; } #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) { margin-bottom: 20px; margin-right: 0px; } #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 { 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) { top: 86px; } #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 { content: ''; width: 14px; height: 14px; border-radius: 100%; background-color: #627499; position: absolute; top: -30px; left: 8px; } #arc-v2.arc { height: 60px; padding-top: 25px; padding-bottom: 15px; box-sizing: content-box; } #arc-v2 .arc-line { width: 100%; padding: 2px; box-sizing: border-box; background-color: #627499; } #arc-v2 .arc-events { padding-top: 25px; margin-top: -25px; padding-bottom: 15px; white-space: nowrap; overflow: auto; } #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; font-size: 13px; } #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%; padding: 2px; box-sizing: border-box; background-color: #996262; z-index: 200; position: relative; } #arc-v3 .arc-caption { display: inline-block; position: relative; top: -27px; font-size: 16px; color: #996262; font-weight: bold; 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-wrapper { 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 { width: 0; height: 0; border: 10px solid; border-color: transparent #bbb transparent transparent; position: absolute; top: 35px; transition: opacity .5s ease; } #arc-v3 .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; margin-top: 14px; top: 0; } #arc-v3 .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; } #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-v3 .arc-event:last-of-type { margin-right: 50px; } #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-v3 .arc-event::after { content: ''; width: 12px; height: 12px; border-radius: 100%; background-color: #996262; position: absolute; top: -27px; 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; }